<template>
  <div class="ad-form">
    <el-form size="mini" inline label-position="right" label-width="auto" ref="form" :model="form" v-loading="loading"
             :disabled="isDisableForm">
      <div class="ad-block">
        <template>
          <el-radio v-model="form.type" label="11" style="margin-bottom: 10px">应付</el-radio>
          <el-radio v-model="form.type" label="10">应收</el-radio>
        </template>
        <el-form-item label="费用科目：" prop="customerSubject" :rules="[{required: true, message: '请选择'}]">
          <ad-status-select size="mini" v-model="form.customerSubject" :dict="dict.finance_customer_subject"/>
        </el-form-item>

        <el-form-item label="结算人：" prop="settlementUser" :rules="[{required: true, message: '请输入'}]">
          <el-input v-model="form.settlementUser" placeholder="请输入"/>
        </el-form-item>
        <el-form-item label="金额：" prop="settlementFee" :rules="[{required: true, message: '请输入'}]">
          <ad-input-number v-model="form.settlementFee" placeholder="请输入" :precision="2"/>
        </el-form-item>
        <el-form-item label="渠道：" prop="channel" :rules="[{required: true, message: '请选择'}]">
          <ad-status-select size="mini" v-model="form.channel" :dict="dict.finance_channel"/>
        </el-form-item>
        <el-form-item label="结算时间：" prop="settlementTime" :rules="[{required: true, message: '请选择'}]">
          <el-date-picker
              v-model="form.settlementTime"
              type="datetime"
              size="mini"
              value-format="timestamp" format="yyyy-MM-dd HH:mm"
              placeholder="选择时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="凭证：" prop="imgList" :rules="[{required: true, message: '请选择'}]">
          <ad-upload v-model="form.imgList" multiple/>
        </el-form-item>
        <el-form-item label="结算备注：" prop="remark">
          <el-input v-model="form.remark" type="textarea" :rows="2"/>
        </el-form-item>
      </div>
    </el-form>
    <div class="op">
      <el-button type="primary" :loading="saving" @click="save">保 存</el-button>
      <el-button type="primary" plain @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
  import AdInputNumber from '@/components/AdInputNumber'
  import AdStatusSelect from '@/components/AdStatusSelect'
  import AdUpload from '@/components/AdUpload'
  import adForm from '@/mixins/adForm'
  import {getLevelList} from '@/api/city/provinceCity'
  import {add, edit, get} from '@/api/dayKeeping'

  class Form {

  }

  export default {
    components: {AdInputNumber, AdStatusSelect, AdUpload},
    mixins: [adForm({get, add, edit})],
    dicts: ['finance_type', 'finance_customer_subject', 'finance_channel'],
    watch: {
      '$attrs.visible': {
        immediate: true,
        handler(visible) {
          let self = this;
          if (visible) {
            self.form = {
              type: null,
              customerSubject: null,
              settlementUser: null,
              settlementFee: undefined,
              channel: null,
              settlementTime: null,
              imgList: [],
              remark: null
            }
            self.$nextTick(() => {
              self.$refs['form'].clearValidate();
            });
          }
        }
      }
    },
    data() {
      return {
        cityData: [],
        form: new Form()
      }
    },
    created() {
      getLevelList().then(res => this.cityData = res.data)
    }
  }
</script>

<style scoped>

</style>
